<template>
  <div class="terms-wrapper">
    <canvas ref="artCanvas" class="art-canvas"></canvas>
    <div class="terms-container">
      <h1>用户条款</h1>
      <p class="last-updated">最后更新日期：2025年4月11日</p>

      <section>
        <p>欢迎使用招聘实验室（以下简称“平台”），由 Joblab 公司（以下简称“我们”或“公司”）运营。在使用本平台之前，请仔细阅读以下条款。这些条款构成您与我们之间的法律协议，适用于您访问和使用平台的所有服务。</p>
      </section>

      <section>
        <h2>1. 接受条款</h2>
        <p>通过注册、访问或使用本平台，您确认已阅读、理解并同意受本用户条款（以下简称“条款”）约束。如果您不同意这些条款，请勿使用本平台。</p>
      </section>

      <section>
        <h2>2. 服务描述</h2>
        <p>招聘实验室是一个连接求职者和招聘者的在线平台，提供职位发布、简历投递、招聘管理和职业发展等功能。我们保留随时修改或中止部分或全部服务的权利，恕不另行通知。</p>
      </section>

      <section>
        <h2>3. 用户资格</h2>
        <ul>
          <li>您必须年满18周岁，或在您所在司法管辖区达到法定最低年龄，方可使用本平台。</li>
          <li>您必须提供真实、准确、完整的信息用于注册和使用。</li>
          <li>您不得以他人身份注册或冒充他人使用本平台。</li>
        </ul>
      </section>

      <section>
        <h2>4. 用户行为规范</h2>
        <p>在使用本平台时，您同意：</p>
        <ul>
          <li>不发布虚假、误导性或非法的职位信息、简历或其他内容。</li>
          <li>不从事任何可能损害平台或他人利益的行为，包括但不限于传播病毒、进行网络攻击或窃取他人信息。</li>
          <li>遵守所有适用的法律法规。</li>
          <li>不以任何方式干扰平台的正常运营。</li>
        </ul>
      </section>

      <section>
        <h2>5. 知识产权</h2>
        <ul>
          <li>平台上的所有内容（包括但不限于文本、图形、标志、软件）均属我们或我们的许可方所有，受版权、商标和其他法律保护。</li>
          <li>您上传的内容（例如简历、职位描述）授予我们非独占、可转让、全球范围的许可，以便在平台上展示和推广。</li>
        </ul>
      </section>

      <section>
        <h2>6. 免责声明</h2>
        <ul>
          <li>平台按“现状”提供，我们不对服务的持续可用性、准确性或适用性作出任何明示或暗示的保证。</li>
          <li>我们不对用户之间的交互或因使用平台而导致的任何损失承担责任。</li>
        </ul>
      </section>

      <section>
        <h2>7. 责任限制</h2>
        <p>在法律允许的范围内，我们对因使用本平台而产生的任何间接、附带、特殊或后果性损害不承担责任。</p>
      </section>

      <section>
        <h2>8. 条款变更</h2>
        <p>我们可能不时更新本条款，更新后的条款将在发布后立即生效。继续使用平台即表示您接受更新后的条款。</p>
      </section>

      <section>
        <h2>9. 终止</h2>
        <p>如果您违反本条款，我们有权暂停或终止您的账户，并拒绝您未来使用平台的权利。</p>
      </section>

      <section>
        <h2>10. 联系我们</h2>
        <p>如有任何疑问，请通过以下方式联系我们：</p>
        <ul>
          <li>电子邮件：support@joblab.com</li>
          <li>地址：中国某市某区某路123号</li>
        </ul>
      </section>

      <div class="back-link">
        <router-link to="/register">返回注册页面</router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TermsOfService',
  mounted() {
    const canvas = this.$refs.artCanvas;
    const ctx = canvas.getContext('2d');

    // 设置画布大小
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    // 绘制艺术字，与注册页面一致
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.font = 'bold 80px "Arial", sans-serif';
    ctx.fillStyle = 'rgba(163, 217, 163, 0.3)';
    ctx.fillText('招聘实验室🧪', canvas.width / 2, canvas.height / 2 - 30);
    ctx.font = 'italic 60px "Arial", sans-serif';
    ctx.fillStyle = 'rgba(102, 187, 106, 0.3)';
    ctx.fillText('Joblab', canvas.width / 2, canvas.height / 2 + 30);
  }
};
</script>

<style scoped>
.terms-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f0f7f0;
  position: relative;
  overflow: auto;
}

.art-canvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
}

.terms-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 800px;
  padding: 40px;
  margin: 40px 20px;
  background-color: #e6f3e6;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  color: #2e7d32;
}

.terms-wrapper::before,
.terms-wrapper::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #a3d9a3;
  border-radius: 50%;
  opacity: 0.5;
}

.terms-wrapper::before {
  top: 10%;
  left: 5%;
}

.terms-wrapper::after {
  bottom: 10%;
  right: 5%;
}

h1 {
  font-size: 28px;
  margin-bottom: 20px;
  text-align: center;
  color: #2e7d32;
}

.last-updated {
  font-size: 14px;
  color: #388e3c;
  text-align: center;
  margin-bottom: 30px;
}

section {
  margin-bottom: 30px;
}

h2 {
  font-size: 20px;
  margin-bottom: 10px;
  color: #2e7d32;
}

p {
  font-size: 16px;
  line-height: 1.6;
  color: #388e3c;
}

ul {
  list-style-type: disc;
  padding-left: 20px;
  margin-top: 10px;
}

ul li {
  font-size: 16px;
  line-height: 1.6;
  color: #388e3c;
  margin-bottom: 8px;
}

.back-link {
  text-align: center;
  margin-top: 30px;
}

.back-link a {
  color: #2e7d32;
  text-decoration: underline;
  font-size: 16px;
}

.back-link a:hover {
  color: #81c784;
}
</style>